<template>
	<view class="page-section page-section-gap map-container">
		<map id="maps" style="width: 100%; height: 80vh;" :layer-style='5' :style="{height:mapheight}"
			:show-location='true' :latitude="latitude" :longitude="longitude" :markers="markers" :scale="scale"
			@callouttap='callouttap'>
			<!-- 自定义窗口 @markertap="markertap"  -->
			<cover-view slot="callout">
				<template v-for="(item,index) in markers">
					<cover-view :marker-id="item.id" :key='index'>
						<cover-view class="position-relative" style="width: 92rpx; height: 78rpx;">
							<cover-image class="position-absolute" style="width: 92rpx; height: 78rpx;"
								:src='item.iconPath'></cover-image>
							<cover-view style="top: 13rpx; left: 45rpx; width: 30rpx; height: 30rpx;"
								class="border bg-white rounded-circle flex align-center justify-center position-absolute">
								<cover-view>{{item.options.cusName}}</cover-view>
							</cover-view>
						</cover-view>
					</cover-view>
				</template>

			</cover-view>

			<cover-view class="cover-view" :style='{bottom:coverbottom}' @click="backToLocation">
				<cover-image class="cover-image" @click="backToLocation" src="@/static/images/map/ditudingwei1.png">
				</cover-image>
				<cover-view>
					定位
				</cover-view>
			</cover-view>
		</map>
		<view v-if="showType">您当前的位置：{{localAddress}}
			<br>
			<view>备注：点击地图上相应的客户位置，可以显示客户导航信息</view>
		</view>
		<view v-else="showType">
			<u--form labelPosition="left" :model="mapInfo" ref="form1" class="ud-mapForm">
				<u-form-item label="客户名称:" prop="name" borderBottom labelWidth=70>
					<u--input v-model="mapInfo.name" border="none" readonly></u--input>
				</u-form-item>
				<u-form-item label="地址:" prop="address" borderBottom labelWidth=40>
					<u--input v-model="mapInfo.address" border="none" readonly>
						<template slot="suffix">
							<uni-icons class="ud-daohang" type="paperplane-filled" size="25" @click="daohang()">
							</uni-icons>
						</template>
					</u--input>
				</u-form-item>
			</u--form>
		</view>
	</view>
</template>

<script>
	import {
		listAllCustomer,
		getCustomer
	} from "@/api/crm/customer.js";
	//import MsMap from '@/js_sdk/ms-openMap/openMap.js'
	export default {
		data() {
			return {
				latitude: '', //纬度
				longitude: '', //经度
				markers: [], //标记点数组
				scale: 12, //缩放级别
				bottomData: false,
				localAddress: '',
				showType: true,
				// 点击选中id
				checkedId: 0,
				// 选中marker列表下标
				markerIndex: -1,
				mapInfo: {
					name: undefined,
					address: undefined,
					lianxiren: undefined,
					tel: undefined,
					longitude: '',
					latitude: ''
				}
			}
		},
		onReady() {
			//调用的函数放到onReady里面
			this.getlocal();
		},
		onLoad() {

		},
		computed: {
			mapheight() {
				let data = ''
				if (this.bottomData) {
					if (this.upTop) {
						data = '50px'
					} else {
						data = '200px'
					}
				} else {
					data = '86vh'
				}
				return data
			},
			coverbottom() {
				let data = ''
				if (this.bottomData) {
					data = '20rpx'
				} else {
					data = '100rpx'
				}
				return data
			}
		},
		methods: {
			//地图标记点;   具体的属性可以看看官网的说明
			addMarkers() {
				// 先获取当前定位信息，要不然异步无法及时获取当前定位信息
				var that = this;
				//地图标记点静态数据赋值;
				//标记点和连线的意思差不多，标记点的数组是单纯将markers数组中的对象的经纬度通过图片的方式标记出来（图片可以自定义）
				listAllCustomer().then(res => {
					const pois = res.data;
					const vm = this;
					console.log("客户数据", pois);
					if (pois.length > 0) {
						pois.forEach((poi, index) => {
							const {
								lng,
								lat
							} = poi;
							console.log(poi)
							const obj = {
								// 因后台客户id为long，地图id为number，会丢失经度，所以改用客户编号cusSn，去掉前缀替代，保证唯一即可
								id: poi.cusSn.slice(2),
								latitude: parseFloat(poi.latitude),
								longitude: parseFloat(poi.longitude),
								iconPath: '/static/images/map/ditudingwei.png', //显示的图标        
								rotate: 0, // 旋转度数
								width: 30, //宽
								height: 30, //高
								alpha: 1, //透明度
								title: poi.cusName,
								options: {
									id: poi.id,
									cusSn: poi.cusSn,
									cusName: poi.cusName,
									address: poi.cusAddress,
								},
								callout: { //自定义标记点上方的气泡窗口 点击有效  
									content: poi.cusName + ",距离:" + this.distance(this.latitude, this
										.longitude, parseFloat(poi.latitude), parseFloat(poi
											.longitude))+"KM", //文本
									color: '#ffffff', //文字颜色
									fontSize: 14, //文本大小
									borderRadius: 15, //边框圆角
									borderWidth: '10',
									bgColor: '#e51860', //背景颜色
									display: 'ALWAYS', //常显
								},

							};
							vm.markers.push(obj);
						});
					}
				})
			},
			//定位方法;获取当前的经纬度，也可以通过经纬度来获取当前的地理位置，比如：xx省、xx市、xx镇
			getlocal: function() {
				let _this = this;
				dd.device.geolocation.get({
					targetAccuracy: 200,
					coordinate: 1,
					withReGeocode: true,
					useCache: false, //默认是true，如果需要频繁获取地理位置，请设置false
					onSuccess: function(result) {
						console.log('当前位置的经度：' + result.longitude);
						console.log('当前位置的纬度：' + result.latitude);
						_this.longitude = result.longitude;
						_this.latitude = result.latitude;
						_this.localAddress = result.address;
						// 拿到定位信息后，再添加标注点，便于计算距离
						_this.addMarkers();
					},
					onFail: function(err) {}
				});
			},
			// 两点间距离
			distance(lat1, lon1, lat2, lon2) {
				let PI = 3.14159265358979323; //圆周率
				let R = 6371229; //地球半径
				let x, y, distance;
				let lonres = lon1 > lon2 ? lon1 - lon2 : lon2 - lon1;
				let latres = lat1 > lat2 ? lat1 - lat2 : lat2 - lat1;
				x = (lonres) * PI * R * Math.cos(((lat1 + lat2) / 2) * PI / 180) / 180;
				y = (lat2 - lat1) * PI * R / 180;
				distance = Math.hypot(x, y)/1000; //千米
				return Math.round(distance*10)/10; //保留一位小数
			},
			// 获取点击后的客户信息
			getTargetInfo(obj) {
				this.mapInfo.name = obj.options.cusName;
				this.mapInfo.address = obj.options.address;
				this.mapInfo.longitude = obj.longitude;
				this.mapInfo.latitude = obj.latitude;
				this.showType = false;
			},
			//地图图标点击事件
			markertap(e) {
				console.log("===你点击了标记点图标===", e);
			},
			//地图点击事件
			callouttap(e) {
				//console.log("===你点击了标记点名称===", e);
				this.checkedId = e.detail.markerId;
				let markerId = e.detail.markerId;
				for (let i = 0; i < this.markers.length; i++) {
					if (this.markers[i].id == e.detail.markerId) {
						this.markerIndex = i;
						break;
					}
				}
				if (this.markerIndex != -1) {

					this.getTargetInfo(this.markers[this.markerIndex]);

				} else {
					uni.showToast({
						title: '暂未该客户信息',
					})
				}
			},
			onControltap() {
				console.log('da');
			},
			backToLocation() {
				console.log('woshi play');
				this.getlocal();
			},
			daohang() {
				dd.biz.map.view({
					latitude: this.mapInfo.latitude, // 纬度
					longitude: this.mapInfo.longitude, // 经度
					title: this.mapInfo.name // 地址/POI名称
				});
			}

		}
	}
</script>

<style lang='less' scoped>
	.ud-mapForm {
		margin-left: 10rpx;
	}

	.ud-daohang {
		margin-right: 10rpx;
	}

	.map-container {
		position: relative;
		overflow: hidden;

		.cover-view {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			width: 80rpx;
			height: 80rpx;
			color: #484848;
			background-color: #fff;
			background-size: 120rpx 120rpx;
			background-position: center center;
			position: absolute;
			bottom: 100rpx;
			right: 32rpx;
		}

		.cover-image {
			display: inline-block;
			width: 30rpx;
			height: 30rpx;
		}

		.customCallout {
			box-sizing: border-box;
			background-color: #fff;
			border: 1px solid #ccc;
			border-radius: 30px;
			width: 150px;
			height: 40px;
			display: inline-flex;
			padding: 5px 20px;
			justify-content: center;
			align-items: center;
		}

		.content {
			flex: 0 1 auto;
			margin: 0 10px;
			font-size: 14px;
		}
	}
</style>
